<template>
  <h2>shallowReactive和shalliwRef</h2>
  <h3>m1:{{ m1 }}</h3>
  <h3>m2:{{ m2 }}</h3>
  <h3>m3:{{ m3 }}</h3>
  <h3>m4:{{ m4 }}</h3>
  <hr>
  <button @click="update">更新数据</button>
</template>

<script lang='ts'>
import {
  defineComponent,
  reactive,
  shallowReactive,
  ref,
  shallowRef,
} from "vue";

export default defineComponent({
  name: "App",
  setup() {
    //深劫持（深监视）---深度响应式
    const m1 = reactive({
      name: "铭腾",
      age: 20,
      car: {
        name: "奔驰",
        color: "red",
      },
    });
    
    //浅劫持（浅监视）---浅度响应式
    const m2 = shallowReactive({
      name: "铭腾",
      age: 20,
      car: {
        name: "奔驰",
        color: "red",
      },
    });

    //深劫持（深监视）---深度响应式 --做了reactive处理
    const m3 = ref({
      name: "铭腾",
      age: 20,
      car: {
        name: "奔驰",
        color: "red",
      },
    });

    //浅劫持（浅监视）---浅度响应式
    const m4 = shallowRef({
      name: "铭腾",
      age: 20,
      car: {
        name: "奔驰",
        color: "red",
      },
    });

    const update = () => {
      //更改m1的数据---->reactive方式
      // m1.name += '11';
      // m1.car.name += '12';

      //更改m2的数据---->shallowReactive方式
      //m2.name += '21';
      //m2.car.name += '22';//改变数据不会重新渲染

      //更改m3的数据---->ref方式
      //m3.value.name += '31';
      //m3.value.car.name += '32';

      //更改m4的数据---->shallowRef方式
      m4.value.name += '41';//改变数据不会重新渲染
      m4.value.car.name += '42';//改变数据不会重新渲染
    }
    return {
      m1,
      m2,
      m3,
      m4,
      update
    };
  },
});
</script>
